<template>
  <div class="list-echarts two">
    <img class="twotopimg" src="../../assets/images/twotop-1.png" alt="">
    <div class="ltitle">参课人次</div>
    <div style="display: flex;justify-content: flex-end;position: relative;">
      <div class="title" style="margin-left: -10px;">课后服务数据分析</div>
      <img @click="centershow()" src="../../assets/images/xq.png" alt="" style="position: absolute;right: 18px;top: -6px;cursor: pointer;">
    </div>
    <div>
      <div class="seltime">
        <el-date-picker
          :editable="false"
          value-format="yyyy-MM"
          v-model="time"
          align="right"
          type="month"
          @change="timefun"
          placeholder="选择日期">
        </el-date-picker>
      </div>
    </div>
    <div style="display: flex;justify-content: flex-end;margin-top: 20px;padding-bottom: 25px;border-bottom: 1px dashed #50759f;">
      <div id="participants" style="width: 380px;height: 180px;"></div>
    </div>
    <div style="display: flex;justify-content: center;border-bottom: 1px dashed #50759f;" class="page">
      <div class="pagination" style="width: 405px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :page-size="1"
          :total="page_count">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { numberpart } from '@/api/user.js'
  import * as echarts from "echarts"
  export default {
    name: 'numberparticipants',
    components: {},
    props: ["qyvalue"],
    data() {
      return {
        time: '',
        page: 1,
        limit: 4,
        ka: [],
        kb: [],
        name: [],
        page_count: 0,
        myChart: '',
        chartDo: ''
      }
    },
    computed: {},
    watch: {
      qyvalue:{
        deep:true,
        immediate: true,
        handler(newVal,oldVal){
          if (newVal!='') {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var now = year+'-'+month
            // this.time = now
            this.time = '2023-9'
            this.numberpartfn()
          }
        }
      }
    },
    created() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var now = year+'-'+month
      // this.time = now
      this.time = '2023-9'
    },
    mounted() {
    },
    methods: {
      centershow() {
        this.$emit('centershow',1)
      },
      numberpartfn() {
        var that = this,
        params = {
          page: this.page,
          limit: this.limit,
          school_area_id: this.qyvalue,
          month: this.time
        }
        numberpart(params).then(res => {
          var arr = res.data.data
          this.ka= []
          this.kb= []
          this.name= []
          this.page_count = res.data.page_count
          for (let i = 0; i < arr.length; i++) {
            var fua = '-'+arr[i].a_number
            if (fua==0) {
              var obj = {value: -40.01, itemStyle: {color: 'rgba(0,0,0,0)'}}
              this.ka.unshift(obj)
            } else {
              this.ka.unshift(fua)
            }
            if (arr[i].b_number==0) {
              var obj = {value:0, itemStyle: {color: 'rgba(0,0,0,0)'}}
              this.kb.unshift(obj)
            } else {
              this.kb.unshift(arr[i].b_number)
            }
            this.name.unshift(arr[i].name)
          }
          if (this.page!=1) {
            var options = this.myChart.getOption()
            options.series[0].data = this.kb
            options.series[1].data = this.ka
            options.yAxis[0].data = this.name
            this.myChart.setOption(options)
          } else {
            this.echart()
          }
        })
      },
      handleSizeChange() {
        this.page = val
        this.numberpartfn()
      },
      handleCurrentChange(val) {
        this.page = val
        this.numberpartfn()
      },
      timefun() {
        this.numberpartfn()
      },
      echart() {
        var chartDom = document.getElementById('participants');
        // var ka = this.ka
        // var kb = this.kb
        var that = this
        this.myChart = this.$echarts.init(chartDom);
        var option = {
          color:['#0092ee','#ff9000'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (params) {
              let firstParams = params[0];
              if (typeof(firstParams.data.value)!='undefined') {
                firstParams.data = '0'
              }
              if (params.length==1) {
                if (params[0].seriesName == '课程服务B') {
                  var datasnd = that.kb[params[0].dataIndex]
                  if (typeof(that.kb[params[0].dataIndex].value)!='undefined') {
                    datasnd = '0'
                  }
                  if(firstParams.data.indexOf('-')!=-1) {
                    firstParams.data = firstParams.data.split('-')[1]
                    firstParams.data = firstParams.data.split('"')[0]
                  }
                  return firstParams.name + '<br>' + '课程服务A：' + firstParams.data + ' <br>课程服务B：' + datasnd;
                } else {
                  var datasnd = that.ka[params[0].dataIndex]
                  if (typeof(datasnd.value)!='undefined') {
                    datasnd = '0'
                  }
                  if(datasnd.indexOf('-')!=-1) {
                    datasnd = datasnd.split('-')[1]
                    datasnd = datasnd.split('"')[0]
                  }
                  return firstParams.name + '<br>' + '课程服务A：' + datasnd + ' <br>课程服务B：' + firstParams.data;
                }
              } else {
                var sndParams = params[1];
                var datasnd = JSON.stringify(sndParams.data)
                if (typeof(JSON.parse(datasnd).value)!='undefined') {
                  datasnd = '0'
                }
                if(datasnd.indexOf('-')!=-1) {
                  datasnd = datasnd.split('-')[1]
                  datasnd = datasnd.split('"')[0]
                }
                return firstParams.name + '<br>' + '课程服务A：' + datasnd + ' <br>课程服务B：' + firstParams.data;
              }
            }
          },
          legend: {
            itemHeight: 12,
            itemWidth: 12,
            data: ['课程服务A', '课程服务B'],
            bottom: 0,//legend距离canvas上面的距离
            right: 70,
            textStyle: {//文字颜色
             fontSize: 12,
             color: 'white',
             padding:[0,3]//文字与图形之间的左右间距
            },
            itemGap: 15,//间距
          },
          grid: {
            top: '0',
            left: '0',
            right: '0',
            bottom: '30',
            containLabel: true
          },
          xAxis:{
            axisLabel: {
              show: true,
              textStyle: {
                color: "none",
              },
            },
            type: 'value',
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            min : function(value){
              //最小值设置，其中-value.max * 1.05 乘以1.05 ，主要是使图的边界小于最小的值，给边界留空间
              return ( Math.abs(value.min) < value.max ? -value.max * 1.05 : value.min *  1.05).toFixed(2);
            },
            max : function(value){
             //最大值设置，其中-value.min * 1.05 乘以1.05 ，主要是使图的边界大于最大于值，给边界留空间
              return ( Math.abs(value.min) < value.max ? value.max * 1.05 : -value.min * 1.05).toFixed(2);
            }
          },
          yAxis:{
            type: 'category',
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
                textStyle: {
                  color: 'white',  //更改坐标轴文字颜色
                  fontSize : 12, //更改坐标轴文字大小
                  align: 'right',
                }
            },
            data: this.name
          },
          series: [
            {
              name: '课程服务A',
              type: 'bar',
              stack: 'Total',
              label: {
                show: true,
                textStyle: {
                  fontSize: 12,
                  color: 'white'
                }
              },
              emphasis: {
                focus: 'series'
              },
              data: this.kb,
              barWidth: 20,
              itemStyle: {
                normal: {
                  barBorderRadius: [0, 10, 10, 0],
                  color: function (params) {
                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: "#ff9000" },
                      { offset: 0.5, color: "#f5a400" },
                      { offset: 1, color: "#eabb00" }
                    ], false)
                  },
                  label: {
                    formatter: function (value, index) {
                      let value1 = JSON.stringify(value.value)
                      let value2 = that.ka[value.dataIndex]
                      if (typeof(value2.value)!='undefined') {
                        value2 = '0'
                      }
                      if (typeof(value1.value)!='undefined') {
                        value1 = '0'
                      }
                      if(value2.indexOf('-')!=-1) {
                        value2 = value2.split('-')[1]
                        value2 = value2.split('"')[0]
                      }
                      let  bf = 100 - Math.floor(Number(value2)/(Number(value1) + Number(value2))*100)
                      if(isNaN(bf)) {bf=0}
                      return bf+'%/'+value1+'人次'
                    },
                    // formatter: "{c}"+"人次",
                    show: true,
                    position: "insideLeft",
                    textStyle: {
                      fontWeight: "bolder",
                      fontSize: "12",
                      color: "#fff"
                    }
                  }
                }
              }
            },
            {
              name: '课程服务B',
              type: 'bar',
              stack: 'Total',
              label: {
                show: true,
                position: 'left'
              },
              emphasis: {
                focus: 'series'
              },
              data: this.ka,
              barWidth: 20,
              itemStyle: {
                normal: {
                  barBorderRadius: [10, 0, 0, 10],
                  color: function (params) {
                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: "#00d4ee" },
                      { offset: 0.5, color: "#00a3ee" },
                      { offset: 1, color: "#0092ee" }
                    ], false)
                  },
                  label: {
                    formatter: function (value, index) {
                      let value1 = JSON.stringify(value.value)
                      if(value1.indexOf('-')!=-1) {
                        value1 = value1.split('-')[1]
                        value1 = value1.split('"')[0]
                      }
                      if (value1==40.01) {
                        value1 = '0'
                      }
                      var kbdataIndex = that.kb[value.dataIndex]
                      if (typeof(that.kb[value.dataIndex].value)!='undefined') {
                        kbdataIndex = that.kb[value.dataIndex].value
                      }
                      let  bf = Math.floor(Number(value1)/(Number(value1) + Number(kbdataIndex))*100)
                      if(isNaN(bf)) {bf=0}
                      return value1+'人次/'+bf+'%'
                    },
                    show: true,
                    position: "insideRight",
                    textStyle: {
                      fontWeight: "bolder",
                      fontSize: "12",
                      color: "#fff"
                    }
                  }
                }
              }
            }
          ]
        };
        option && this.myChart.setOption(option);
      }
    }
  }
</script>
<style scoped lang="less">
  .two{
    position: relative;
    margin-top: 25px;
    // padding-right: 20px;
    box-sizing: border-box;
    .twotopimg{
      position: absolute;
      left: -10px;
      top: 0;
    }
    .ltitle{
      position: absolute;
      left: 0px;
      top: 0;
      font-size: 18px;
      color: white;
      font-weight: bold;
      writing-mode:vertical-lr;
      letter-spacing: 4px;
    }
    .title{
      width: 320px;
      color: #00e2ff;
      font-size: 14px;
      font-weight: 600;
    }
    .pagination{
      padding: 10px 0;
    }
    .seltime{
      position: absolute;
      top: -6Px;
      left: 78Px;
      width: 110Px;
      height: 28Px;
      background-image: url('../../assets/images/onetop-6.png');
      background-repeat: no-repeat;
    }
  }
</style>
